<template>
  <div class="main" v-loading="loading">
    <div class="search">
      <el-input suffix-icon="el-icon-search" placeholder="请输入货品名称或编号" v-model="search" type="search"
                @change="searchGoods"></el-input>
    </div>
    <div class="result">
      <el-collapse>
        <div v-if="result.length === 0" class="no-data">无数据</div>
        <el-collapse-item v-for="item in result" :title="item.spname" :key="item.spbh">
          <template slot="title">
            {{ item.name }}
            <el-tag :type="item.stock !== 0 ? 'success': 'danger'" size="mini" style="margin-left: 10px;">{{ item.stock }}</el-tag>
            <el-tag size="mini" style="margin-left: 10px;">{{ item.storage }}</el-tag>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import {ckQuery} from "@/api/goods";

export default {
  name: "index",
  data() {
    return {
      search: '',
      result: [],
      loading: false
    }
  },
  methods: {
    searchGoods() {
      if(this.search === '') return false
      this.loading = true
      let data = {
        spname: this.search
      }
      ckQuery(data).then(res => {
        if (res.code === 200) {
          this.result = res.data
          if (res.data.length === 0) {
            this.$toast.open({
              message: '无数据',
              type: 'warning',
              duration: 2000,
              dismissible: true,
              position: 'top'
            })
          }
        }
      }).finally(_ => {
        this.loading = false
      })

      this.$buryingPoint('查询仓库商品', this.search)
    },
    getHistory(spbh) {
      this.$router.push({path: "/Goods/historyPrice", query: {spbh}})
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  max-width: 600px;
  padding: 10px;
  text-align: center;

  .search {
  }

  .result {
    .no-data {
      padding: 20px;
      color: #ccc;
    }

    .des-box {
      border-top: 1px solid #6595c7;
      border-left: 1px solid #6595c7;
    }

    .des-title {
      height: 32px;
      background-color: #c1d7ea;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }

    .des-content {
      height: 32px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }
  }
}
</style>
